<script>
import {ElMessage,ElLoading} from "element-plus";
export default {
  name: "killOrder",
  data() {
    return {
      tableData: [],
      startIndex: 0,
      size: 'small',
      index: 0,
      driverStatus:'',
      killVo:{
        vehicleId:null,
        driverId:null,
        vehicleTypeId:null,
        orderNo:''
      },
      userInfo:{}
    }
  },
  mounted() {
    const userInfo=JSON.parse(localStorage.getItem("userInfo"));
    console.log(userInfo.id);
    this.$axios.get("/vehicle/vehicle/findDriverAndVehicle/"+userInfo.id).then(res=>{
        this.userInfo=res.data.data;
        this.killVo.vehicleId=res.data.data.id;
        this.killVo.vehicleTypeId=res.data.data.vehicleTypeId;
        this.killVo.driverId=res.data.data.driver.id;
        this.driverStatus=res.data.data.driver.driverStatus;
        console.log(this.driverStatus);
        if(this.driverStatus==="available"){
        this.getData();
    }
    })
  
  },
  methods: {
    getData() {
      this.$axios.get("/order/killList").then(res => {
        if(res.data.data!=null){
          const killList=res.data.data
        // 过滤订单总重大于自己车身重量的订单
        killList.forEach(element => {
          if(element.totalWeight<=this.userInfo.capacity){
            this.tableData.push(element)
          }
        });
        }
      })
    },
    killOrder(index){
      const loading = ElLoading.service({
        lock: true,
        text: '正在拼命抢单中...',
        background: 'rgba(0, 0, 0, 0.7)',
      });
        this.killVo.orderNo=this.tableData[index].orderNo;
        this.$axios.post("/order/killOrder",this.killVo).then(res=>{
          if(res.data.data===true){
            loading.close();
            ElMessage({
              message: '抢单成功',
              type: 'success'
            });
            this.getData();
          }else{
            loading.close();
            this.$message({
              message: '抢单失败',
              type: 'error'
            });
          }
      })
    },
  },
}
</script>
<template>
      <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="id"
        label="序号">
      <template v-slot="scope">
        {{ scope.$index + 1 + startIndex }} <!-- +1 是因为索引是从0开始的 -->
      </template>
    </el-table-column>
    <el-table-column
        prop="orderNo"
        label="订单号"
        width="180"
    ></el-table-column>
    <el-table-column
        prop="createdAt"
        label="创建时间"
        width="180"
    >
    </el-table-column>
    <el-table-column
        prop="isRefrigerated"
        label="是否冷藏">
      <template v-slot="scope">
        <el-tag v-if="scope.row.isRefrigerated" type="success">是</el-tag>
        <el-tag v-if="scope.row.isRefrigerated===false" type="success">否</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="isUrgent"
        label="是否加急">
      <template v-slot="scope">
        <el-tag v-if="scope.row.isUrgent" type="success">是</el-tag>
        <el-tag v-if="scope.row.isUrgent===false" type="success">否</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="isInsurance"
        label="是否保价">
      <template v-slot="scope">
        <el-tag v-if="scope.row.isInsurance" type="success">是</el-tag>
        <el-tag v-if="scope.row.isInsurance===false" type="success">否</el-tag>
      </template>
    </el-table-column>
   <el-table-column
       prop="distance"
       label="运输距离(km)">
   </el-table-column>
   <!-- <el-table-column
      prop="senderReceiver.senderAddress"
      label="出发地"></el-table-column>
   <el-table-column
      prop="senderReceiver.receiverAddress"
     label="目的地">
</el-table-column> -->
    <!-- <el-table-column
        prop="status"
        label="订单状态">
      <template v-slot="scope">
        <el-tag v-if="scope.row.status==='处理中'" type="success">处理中</el-tag>
       <el-tag v-if="scope.row.status==='匹配中'" type="warning">匹配中</el-tag>
      </template>
    </el-table-column> -->
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button type="primary" size="small" @click="killOrder(scope.$index)">抢单</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>